import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {
  Table,
  Select,
  Checkbox,
  Radio,
  Input,
  Modal,
  Form
} from 'antd';
import noop from 'util/noop'
import CustomModal from './modal'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;  
const Option = Select.Option;

@Relax
export default class OptionsSetup extends Component{
  static defaultProps = {
    onShowModal: noop,
    onOptionSave: noop,
    afterSaleOptionInfos: []
  }
  render() {
    let {onEditor, afterSaleOptionInfos, onShowModal} = this.props;
    const columns = [{
      title:'填写项',
      dataIndex: 'name',
      width: 100,
      className:"t-right",
    }, {
      title:'',
      dataIndex: 'value',
      width: 300,
    }, {
      title:'填写项类型',
      dataIndex: 'type',
      width: 100,
      className:"ant-table-th-center",
    }, {
      title: '显示',
      dataIndex: 'isShow',
      width: 100,
      className:"ant-table-th-center",
      render:({isChecked, attrId})=><Checkbox name="isShow" checked={isChecked} onChange={(e)=>this.onOptionSet(e.target, attrId)}></Checkbox>,
    }, {
      title: '必填',
      dataIndex: 'isNeed',
      width: 100,
      className:"ant-table-th-center",
      render: ({isChecked, attrId})=><Checkbox name="isNeed" checked={isChecked} onChange={(e)=>this.onOptionSet(e.target, attrId)}></Checkbox>,
    }, {
      title: '操作',
      dataIndex: 'operate',
      width: 100,
      render: ({isEdit, ...v})=>isEdit ? <a href="javascript:;" onClick={()=>onShowModal(v)}>编辑</a> : null,
    }
    ];
    /**
     * typeId: {
     *  9: "退货原因",
     *  4: "申请凭据",
     *  17: "退款金额",
     *  15: "问题说明",
     *  16: "上传凭证",
     *  3: "商品返回方式",
     *  18: "IMEI码"
     * }
     */
    const data = afterSaleOptionInfos.map((opt)=>{
      let {attrDesc, isEdit, isNeed, attrId, isShow, isSystem, typeId, attrContent} = opt.toJS();
      let tableElement = {
        name:(<div><label className="label-w150 t-right">{`${attrDesc}: `}</label></div>),
        type: isSystem ? '系统默认' : '',
        isShow: {isChecked: isShow == 1, attrId},
        isNeed: {isChecked: isNeed == 1, attrId},
        operate: {attrId, attrDesc, attrContent, isEdit}
      };
      let elemVal = null
      switch(typeId) {
        case '9': 
          let options = attrContent.split(',');
          elemVal = {
            value: (
              <div>
                <Select defaultValue={options[0]} style={{ width: 200 }}>
                  {
                    options.map((v, k)=>{
                      return (
                        <Option key={k} value={v}>{v}</Option>
                      )
                    })
                  }
                </Select>
              </div>
            )
          }
          break;
        case '4': 
          let opts = attrContent.split(',');
          elemVal = {
            value: (
              <div>
                {
                  opts.map((v,k)=>{
                    return (<Checkbox key={k} checked={false}>{v}</Checkbox>)
                  })
                }
              </div>
            )
          }
          break;
        case '17':
          elemVal = {
            value: (
              <div>
                <Input style={{width:'200px',marginRight:'3px'}} />元
              </div>
            )
          }
          break;
        case '15': 
          elemVal= {
            value: (
              <div>
                <Input type="textarea" rows="2" cols="2" className="problem-desc" />
              </div>
            )
          }
          break;
        case '16':   
          elemVal= {
            value: (
              <div>支持本地上传</div>
            )
          }
          break;
        case '3':   
          let returnTypes = attrContent.split(',');
          elemVal= {
            value: (
              <RadioGroup  defaultValue="">
                {
                  returnTypes.map((v,k)=>{
                    return <Radio value={v} key={k}>{v}</Radio>
                  })
                }
              </RadioGroup>
            )
          }
          break;  
        case '18':   
          elemVal= {
            value: (
              <div>
                <Input style={{width:'200px'}} />
                <div className="pull-right lh28"></div>
              </div>
            )
          }
          break;
      }
      return {...elemVal, ...tableElement};
    })
    return (
      <div>
        <Table columns={columns} dataSource={data.filter((v)=>v).toJS()} pagination={false}/>
        <CustomModal />
      </div>
    )
  }
  onOptionSet = ({checked, name}, attrId) => {
    let {onOptionSave} = this.props;
    onOptionSave({attrId, [name]: checked ? 1 : 0, isChecked: true})
  }
} 